<template>
	<view>
		<view class="rows">
			<view class="navBar" :style="{ backgroundColor: bgColor, color: color }">
				<view class="rows" :style="{ height: `${System.statusBarHeight}px` }"></view>
				<view
					class="row a-center"
					:style="{ height: `${navHeight}px`, width: `${navWidth}px` }">
					<block v-if="multiple_Card">
						<view class="left_CardBag">
							<view
								class="iconfont fontFull"
								@click.stop="backBtn"
								:class="iconLeft"></view>
							<view
								class="iconfont icon-qiabao fontFull"
								@click.stop="toCardBag"></view>
						</view>
					</block>
					<block v-else>
						<view class="left" @click="backBtn" v-if="singleBack">
							<view
								class="iconfont icon-shouye2 size36 p-left24"
								:class="iconLeft"></view>
						</view>
					</block>

					<view
						class="flex-1 title ellipsis p-left24"
						:class="{ 'm-left90': searchShow }"
						>{{ title }}</view
					>
				</view>
			</view>
		</view>
		<view
			class="rows"
			:style="{ height: System.statusBarHeight + navHeight + 'px' }"
			v-if="transparent"></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'navBar',
		props: {
			title: {
				type: String,
				default: '',
			},
			transparent: {
				type: Boolean,
				default: true,
			},
			color: {
				type: String,
				default: '#000000',
			},
			bgColor: {
				type: String,
				default: '#ffffff',
			},
			isBack: {
				type: Boolean,
				default: true,
			},
			isTabbar: {
				type: Boolean,
				default: false,
			},
			searchShow: {
				type: Boolean,
				default: false,
			},
			multiple_Card: {
				type: Boolean,
				default: false,
			},
		},

		data() {
			return {
				capsuleWidth: getApp().globalData.capsuleWidth,
			};
		},
		methods: {
			backBtn() {
				if (this.isTabbar) return;
				if (this.isBack) return this.back();
				this.backHome();
			},
			toCardBag() {
				this.toUrl(`/subCard/cardBag`);
			},
		},
		computed: {
			...mapState(['System', 'navHeight', 'navWidth']),
			singleBack() {
				if (!this.isTabbar && !this.searchShow) {
					return true;
				}
			},
			iconLeft() {
				return this.isBack ? 'icon-xiangzuo' : 'icon-shouye-zhihui';
			},
		},
	};
</script>

<style lang="scss" scoped>
	.navBar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.left {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.left_CardBag {
		width: 200rpx;
		height: 90%;
		background-color: #ffffff;
		border: 1rpx solid #ccc;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		margin-left: 20rpx;
	}
	.left_CardBag::before {
		content: '';
		width: 1px;
		height: 60%;
		background-color: #ccc;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.title {
		line-height: 40px;
		font-size: 32rpx;
		font-weight: bold;
	}
	.fontFull {
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 36rpx;
	}
</style>
